<template>
    <div id="diagramContainer">
        <div id="item_left" class="item a">A</div>
        <div id="item_right" class="item b">B</div>
    </div>
</template>
<script lang="js" setup>
import { ref, reactive,onMounted, computed } from 'vue';
import { jsPlumb, jsPlumbUtil } from 'jsplumb';

const $jsPlumb = jsPlumb
const common = reactive({
    connector: ['Bezier'], // 连接线类型：贝塞尔曲线
    endpoint: ['Dot', { radius: 5, cssClass: 'circle', hoverClass: 'circle1' }], // 端点类型：圆点
})
// 初始化jsplumb
const initJsplumb = () => {
    $jsPlumb.ready(function(){
        $jsPlumb.addEndpoint('item_left', {
            anchors: ['Right'],
            uuid: 'fromId'
        })

        $jsPlumb.addEndpoint('item_right', {
            anchors: ['Left'],
            uuid: 'toId'
        })
        console.log('3 秒后建立连线')
        setTimeout(function () {
            $jsPlumb.connect({ uuids: ['fromId', 'toId'], overlays: [['Arrow', { width: 12, length: 12, location: 1 }]] }, common)
            // 获取所有连线
            const connectList = $jsPlumb.getAllConnections()
            // 获取锚点位置
	        let sourceAnchor,targetAnchor, connections = [];
            for (let i = 0; i < connectList.length; i++) {
                if(connectList[i].endpoints[0].anchor.type) {
                    // 新增的锚点
                    sourceAnchor = connectList[i].endpoints[0].anchor.type;
                    targetAnchor = connectList[i].endpoints[1].anchor.type;
                }else{
                    // 原来的锚点
                    const { endpoints:[first, last] } = connectList[i]
                    const { anchor: firstAnchor } = first;
                    const { anchor: lastAnchor } = last;
                    sourceAnchor = firstAnchor.anchors[0].type;
                    targetAnchor = lastAnchor.anchors[0].type;
                }
                connections.push({
                    connectId: connectList[i].id,
                    sourceId: connectList[i].sourceId, // 源节点id
                    targetId: connectList[i].targetId, // 目标节点id
                    sourceAnchor,
                    targetAnchor
                })
            }
            
            console.log('获取连线数据', connections);
        }, 3000)
        // 配置可拖拽节点
        $jsPlumb.draggable('item_left', {
            containment: 'diagramContainer'
        })
        $jsPlumb.draggable('item_right', {
            containment: 'diagramContainer'
        })
    })
}
onMounted(() => {
    initJsplumb()
    console.log(jsPlumbUtil.uuid());
})
  
</script>

<style scoped lang="scss">
#diagramContainer {
    padding: 20px;
    height: 500px;
    border: 1px solid gray;
    display: flex;
    justify-content: space-around;
    position: relative;
}
.circle:hover {
    circle {
        fill: tomato;
    }
}
.item {
    height: 80px;
    width: 80px;
    line-height: 80px;
    text-align: center;
    border: 1px solid #10AC84;
    font-size: 20px;
    font-weight: 600;
    cursor: move;
    &.a {
        position: absolute;
        left: 50px;
    }
    &.b {
        position: absolute;
        right: 60px;
    }
}
</style>
